:root {
  --color-black: #020b28; // 黑色
  --color-white: #ffffff; // 白色
  --color-blue: #3191f8; // 蓝色
  --color-primary: #3cd789; // 主色
  --color-success: #32d294; // 成功
  --color-warning: #feae32; // 警告
  --color-error: #fd0100; // 失败
  --color-info: #828282; // 提示

  --color-basic: #8e8e8e; // 基础文字
  --color-second: #b3b3b3; // 二级文字
  --color-thin: #cacaca; // 三级文字
  --color-border: #e8e8e8; // 边框
  --color-bg: #1a1d29; // 背景
  --color-active: #f1f1f1; // 活跃
  --color-mask: rgba(0, 0, 0, 0.5); // 遮罩

  --font-size: 14px; // 文字大小
  --border-radius: 6px; // 圆角
}

@each $name,
  $color
    in (
      black: var(--color-black),
      white: var(--color-white),
      primary: var(--color-primary),
      bi-primary: var(--color-bi-primary),
      success: var(--color-success),
      warning: var(--color-warning),
      error: var(--color-error),
      info: var(--color-info),
      blue: var(--color-blue),
      basic: var(--color-basic),
      second: var(--color-second),
      thin: var(--color-thin),
      border: var(--color-border),
      bg: var(--color-bg),
      active: var(--color-active),
      mask: var(--color-mask)
    )
{
  .cl-#{'' + $name} {
    color: $color !important;
  }

  .bcl-#{'' + $name} {
    background-color: $color !important;
  }
}
